<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <title>ARPU趋势图</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">

    <link rel="stylesheet" href="/dist/js/datepicker/css/datepicker.css">

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!--头部-->
    <header id="headerDiv" class="main-header">
        <!--#include  file="/pages/admin/header.html"-->
    </header>

    <!--左侧边栏 -->
    <aside id="sidebarDiv" class="main-sidebar">
        <!--#include  file="/pages/admin/sidebar.html"-->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <small>数据图表</small>
            </h1>
            <ol class="breadcrumb">
                <li><i class="fa fa-dashboard"></i>数据图表</li>
            </ol>
        </section>



        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <form role="form" class="form-inline pull-right">
                                <label class="control-label">搜索:</label>

                                <!--<div class="form-group">-->
                                    <!--<div class="c-datepicker-date-editor J-datepicker-range-day mt10">-->
                                        <!--<i class="c-datepicker-range__icon kxiconfont icon-clock"></i>-->
                                        <!--<input id="date" placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">-->
                                    <!--</div>-->
                                <!--</div>-->

                                <div class="form-group">
                                    <select id="searchKey" class="form-control m-b">
                                        <option value="uid">渠道ID</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <div class="input-group">
                                        <input id="uid" type="text" class="form-control">
                                        <input id="game" type="text" class="form-control">
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-primary" onclick="search();"><i class="fa fa-search"></i></button>
                                        </span>
                                    </div>
                                </div>
                            </form>
                        </div>


                        <div class="box-body">
                            <div class="col-xs-12" style="padding-bottom: 80px;">
                                <div id="chart1" style="min-height: 300px"></div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->

                </div>
            </div>

        </section>
        <!-- /.content -->

    </div>


    <!-- Control Sidebar -->
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/morris.js/morris.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/dist/js/adminlte.min.js"></script>
<script src="/dist/js/store.min.js"></script>

<script src="/dist/js/datepicker/js/plugins/moment.min.js"></script>
<script src="/dist/js/datepicker/js/datepicker.all.js"></script>
<script src="/dist/js/echarts.min.js"></script>
<script src="/dist/js/laydate/laydate.js"></script>

<script>

    $(function () {
        // laydate.render({
        //     elem: '#date' //指定元素
        // });
    });

    function search() {
        let game = $("#game").val();
        let uid = $("#uid").val();
        initChart(game, uid);
    }

    //折线图
    function initChart(game, uid) {
        let chart = echarts.init(document.getElementById('chart1'),'light');
        chart.showLoading({color:'#409eff'});
        let day=[0];
        let ar=[0];
        //后台请求 数据
        let url="/lmgame/gamedata/arpu";
        $.ajax({
            type : 'POST',
            data:{'game':game, 'uid':uid},
            url : url,
            dataType : "json",
            success : function(data) {
                if (data.code == '0') {
                    day = [];
                    ar = [];
                    data.data.forEach(v=>{
                        day.push(v.day);
                        ar.push(v.avg_aurp);
                    });
                }
                chart.hideLoading(); //隐藏加载动画
                let option = {
                    title: {
                        text: 'ARPU趋势',
                        textStyle: {
                            fontWeight: 'normal',
                            color: '#1790cf'          // 主标题文字颜色
                        }
                    },
                    tooltip: { trigger: 'axis'},
                    //图例名
                    legend: {
                        data:['走势']
                        //x: 'right'
                    },
                    grid: {
                        left: '1%',   //图表距边框的距离
                        right: '2%',
                        bottom: '0%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data:  day,
                        //坐标轴颜色
                        axisLine:{
                            lineStyle:{
                                color:'#666'
                            }
                        },
                    },
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: function(value,index){
                                    if (value >=1000) {
                                        value = value/1000+'k';
                                    }else if(value <1000){
                                        value = value;
                                    }
                                    return value
                                }
                            },
                            axisLine: {show: false },
                            axisTick: {show: false},
                        }
                    ],
                    series: [
                        {
                            name: '走势',
                            type: 'line',
                            data: ar
                        }
                    ]
                };
                chart.setOption(option);
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                chart2.hideLoading();
            }
        });
    }

    // Date.prototype.Format = function (fmt) {
    //     var o = {
    //         "M+": this.getMonth() + 1, //月份
    //         "d+": this.getDate(), //日
    //         "H+": this.getHours(), //小时
    //         "m+": this.getMinutes(), //分
    //         "s+": this.getSeconds(), //秒
    //         "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    //         "S": this.getMilliseconds() //毫秒
    //     };
    //     if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    //     for (var k in o)
    //         if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    //     return fmt;
    // };

</script>

</body>
</html>
